<template>

		<uni-popup ref="siftmenu" type="bottom">
			<view class="pop-content">
			<view class="pop-head">
			<view class="head-all">全部筛选</view>
			<text class="iconfont icon-guanbi head-close" @click="closepop()"></text>
			</view>
			<view class="pop-price">
				<view class="price-txt">价格区间</view>
				<view class="price-area">
					<input v-model="filter.lowpri" placeholder="自定义最低价"/>
					-
					<input v-model="filter.higpri" placeholder="自定义最高价"/>
				</view>
			</view>
			<view class="pop-position">
				<view class="position-txt">产地</view>
				<view class="position-chos">
					<view v-for="(item,index) in menuList" :class="{active:activeIndex===index}" @click="clickItem(item,index)">
						<text>{{item.title}}</text>
					</view>
				</view>
			
			</view>
			
			</view>
			<view class="pop-foot">
				<view class="foot-btn">
				<button class="reset" @click="resBtn">重置</button>
				<button class="sure" @click="sureBtn">确定</button>
				</view>
			</view>
		</uni-popup>

</template>

<script>
	export default {
		name:"uniPopup",
		data() {
			return {
				//筛选参数
				filter:{
					lowpri:"",
					higpri:"",
					position:""
				},
				activeIndex:0,
				menuList:[
						{
							'title':'上海'
						},
						{
							'title':'安徽'
						},
						{
							'title':'湖南'
						},
						{
							'title':'内蒙古'
						},
						{
							'title':'四川'
						},
						{
							'title':'浙江'
						},
						{
							'title':'台湾'
						},
						{
							'title':'香港'
						}
					
				]
			};
		},
		methods:{
			openpop(){
				this.$refs.siftmenu.open()
			},
			closepop(){
				this.$refs.siftmenu.close()
			},
			clickItem(item,index){
				this.activeIndex=index
				this.filter.position=item.title
			},
			sureBtn(){
				console.log(this.filter)
				//向父组件传递参数
				this.$emit('pop',{
					data:this.filter
				})
				this.closepop()
				
			},
			resBtn(){
				this.filter.lowpri=""
				this.filter.higpri=""
				this.filter.position=""
				this.activeIndex=0
			}
		}
	}
</script>

<style lang="scss">
.pop-content{
	padding: 0 10px;
	background: white;
	padding-bottom: 50px;
	.pop-head{
		padding: 20px 10px;
		display: flex;
		position: relative;
		.head-all{
			padding-left: 40%;
		}
		.head-close{
			position: absolute;
			right: 10px;
		}
	}
	.pop-price{
		padding: 10px 0;
		.price-txt{
			padding: 10px 0;
		}
		.price-area{
			margin: 10px 0;
			display: flex;
			input{
				width: 150px;
				background: #b9baad63;
				padding: 10px 0;
				text-align: center;
				border-radius: 30px;
				margin: 0 10px;
				font-size: 14px;
			}
		}
	}
	.pop-position{
		padding: 10px 0;
		.position-txt{
			padding: 10px 0;
		}
		.position-chos{
			display: flex;
			flex-wrap: wrap;
			view{
				width: 100px;
				background: #b9baad63;
				/* padding: 20px; */
				padding: 10px 0;
				text-align: center;
				font-size: 14px;
				border-radius: 30px;
				margin: 10px 10px;
				margin: 10px 9px;
			}
			.active{
				background: #f69466;
			}
		}
	}
	
}
.pop-foot{
	position: fixed;
	bottom: 0;
	width: 100%;
	.foot-btn{
		border-radius: 30px;
		display: flex;
		.reset{
			background-color: #ffe842;
			margin: 0;
			width: 50%;
			border-top-left-radius: 30px;
			border-bottom-left-radius: 30px;
		}
		.sure{
			background-color: #f69466;
			margin: 0;
			width: 50%;
			border-bottom-right-radius: 30px;
			border-top-right-radius: 30px;
		}
	}
}
</style>